import { useLayoutEffect, useState, useEffect } from "react";


// async function query() {
//     const data = await new Promise((reslove) => {
//         setTimeout(() => {
//             reslove(2);
//         }, 2000)
//     })
//     return data;//100
// }

function App() {
    const [num, setNum] = useState(1)



    // useLayoutEffect
    // 当 num 值变更时，浏览器的那个useLayoutEffect中的副作用函数执行完毕再渲染
    // 副作用函数会阻塞很久，超过 500ms 会导致浏览器掉帧
    // 在这里表现为 页面不闪动 --- num 初始值为1，页面初始化会立即执行一遍useLayoutEffect里的代码，所以num的值渲染到页面上的值是100，
    // 点击后+1变为101，但是此时101并未渲染到页面上，而是等待useLayoutEffect里的setNum(100)执行完毕，此时num=100，所以页面上不管点击多少下，都是显示的100
    useLayoutEffect(() => {
        setNum(100);
    }, [num])

    // useEffect 是异步的，会被挂起，等待 useState 先刷新页面，再执行 useEffect 里的代码
    // useEffect(() => {
    //     // console.log('useLayoutEffect');
    //     console.log(`页面第${num}次刷新`);
    //     // query().then(data => {
    //     //     setNum(data);
    //     // })
    //     // setNum(100); 
    // }, [num])

    return (
        <div>
            <button onClick={() => { setNum(num + 1) }}>{num}</button>
        </div>
    )
}

export default App;